<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <link rel="stylesheet" href="../fonts/fonts.css">
    <script src="../gauge.min.js"></script>
</head>
<body style="background: #fff">

<canvas id="canvas-id"></canvas>

<script>
    var gauge = new RadialGauge({
        renderTo: 'canvas-id',
        width: 300,
        height: 300,
        units: "",
        //title: "",

        startAngle: 90,
        ticksAngle: 180,
        colorPlate: "#ffffff",
        //colorPlateEnd: "#ffffff",
        colorUnits: "#3CA7DB",
        colorNumbers: "#534638",
        colorNeedle: "#8E7860",
        colorNeedleEnd: "#8E7860",
        colorNeedleCircleOuter: "#8E7860",
        colorNeedleCircleOuterEnd: "#8E7860",

        colorNeedleShadowUp: "#8E7860",
        colorNeedleShadowDown: "#8E7860",

        colorMajorTicks: ["#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB", "#EBEBEB"],
        colorMinorTicks: "#EBEBEB",

        minValue: 0,
        maxValue: 100,
        majorTicks: ["","20","40","60","80",""],
        minorTicks: "2",
        strokeTicks: true,
        highlights: [
            {
                "from": -0.25,
                "to": 39.99,
                "color": "#FF9488"
            },
            {
                "from": 39.99,
                "to": 59.99,
                "color": "#8FB9BD"
            },
            {
                "from": 59.99,
                "to": 100.25,
                "color": "#B1B9CB"
            }
        ],
        //
        highlightsWidth: 25,
        numbersMargin: 12,
        //
        //barWidth: 20,
        //barStrokeWidth: 0,
        //barProgress: 1,
        //barShadow: 0,
        //
        animation: true,
        //animationDuration: 500,
        animationRule: "linear",
        animatedValue: true,
        //animateOnInit: true,

        borders: false,
        valueBox: false,

        needleType: "arrow",
        needleEnd: 65,
        needleWidth: 4,
        needleCircleSize: 10,
        needleCircleInner: false,
        needleCircleOuter: true,
        needleShadow: false,

        borderShadowWidth: 0

    }).draw();


    gauge.value = 56;
    gauge.update();
</script>
</body>
</html>
